<template>
  <div class="wrap">
    <!-- <h1>Company Name</h1> -->
    <div class="banner">
      <img src="./images/banner.png" alt>
    </div>
    <div class="page">
      <h2>很抱歉，没有找到这个页面!</h2>
      <a class="btn back" @click.prevent="back">
        <i class="fa fa-angle-left"></i> 返回首页
      </a>
    </div>
    <div class="footer">
      <!-- <p>
        Design by
        <a href="#">xxx</a>
      </p>-->
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    roleType: function () {
      return this.$store.getters.getUserInfo.roleType;
    }
  },
  methods: {
    back () {
      let path = this.roleType == 1 ? 'plat-index' : 'shop-index';
      this.$router.push({ path: path });//返回首页
    },
  }
}
</script>

<style lang="scss" scoped>
.back {
  font-size: 3em;
  line-height: 80px;
  color: orange;
  cursor: pointer;
  &:hover {
    color: $hoverColor;
  }
}
/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* start editing from here */
a {
  text-decoration: none;
}
.txt-rt {
  text-align: right;
} /* text align right */
.txt-lt {
  text-align: left;
} /* text align left */
.txt-center {
  text-align: center;
} /* text align center */
.float-rt {
  float: right;
} /* float right */
.float-lt {
  float: left;
} /* float left */
.clear {
  clear: both;
} /* clear float */
.pos-relative {
  position: relative;
} /* Position Relative */
.pos-absolute {
  position: absolute;
} /* Position Absolute */
.vertical-base {
  vertical-align: baseline;
} /* vertical align baseline */
.vertical-top {
  vertical-align: top;
} /* vertical align top */
.underline {
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin: 0 0 20px 0;
} /* Add 5px bottom padding and a underline */
nav.vertical ul li {
  display: block;
} /* vertical menu */
nav.horizontal ul li {
  display: inline-block;
} /* horizontal menu */
img {
  max-width: 100%;
}
/*end reset*/
body {
  font-family: 'Century Gothic' Geneva Helvetica, sans-serif;
  // background: url('./images/bg.png');
}
.wrap {
  margin: 0 auto;
  width: 96%;
}
h1 {
  margin-top: 20px;
  color: #603813;
  font-size: 3em;
  text-transform: uppercase;
  font-weight: bold;
}
.banner {
  text-align: center;
  margin-top: 30px;
}
.banner img {
  margin-top: 0px;
}
.page {
  text-align: center;
  font-family: 'Century Gothic';
}
.page h2 {
  font-size: 3em;
  color: rgb(99, 44, 37);
  font-weight: bold;
}
.footer {
  font-family: 'Century Gothic';
  position: absolute;
  right: 30px;
  bottom: 20px;
}
.footer p {
  font-size: 1em;
  color: #603813;
}
.footer a {
  color: #f9614d;
}
.footer a:hover {
  text-decoration: underline;
}
/*media queries*/
@media all and (max-width: 1366px) and (min-width: 1280px) {
  .wrap {
    width: 90%;
  }
  .banner {
    margin-top: 30px;
  }
}
@media all and (max-width: 1280px) and (min-width: 1024px) {
  .wrap {
    width: 90%;
  }
}
@media all and (max-width: 1024px) and (min-width: 800px) {
  .wrap {
    width: 90%;
  }
  h1 {
    font-size: 2em;
  }
  .banner {
    margin-top: 0px;
  }
  .page h2 {
    font-size: 2em;
  }
}
@media all and (max-width: 800px) and (min-width: 640px) {
  .wrap {
    width: 90%;
  }
  h1 {
    font-size: 2em;
  }
  .banner {
    margin-top: 10px;
  }
  .banner img {
    width: 34%;
  }
  .page h2 {
    font-size: 2em;
  }
}
@media all and (max-width: 640px) and (min-width: 480px) {
  .wrap {
    width: 90%;
  }
  h1 {
    font-size: 1.6em;
  }
  .banner {
    margin-top: 0px;
  }
  .banner img {
    width: 32%;
  }
  .page h2 {
    font-size: 1.6em;
  }
}
@media all and (max-width: 480px) and (min-width: 320px) {
  .wrap {
    width: 90%;
  }
  h1 {
    font-size: 1.4em;
  }
  .banner {
    margin-top: 0px;
  }
  .banner img {
    width: 32%;
  }
  .page h2 {
    font-size: 1.4em;
  }
  .footer p {
    font-size: 0.9em;
  }
}
@media all and (max-width: 320px) {
  .wrap {
    width: 90%;
  }
  h1 {
    font-size: 1.4em;
  }
  .banner {
    margin-top: 10px;
  }
  .banner img {
    width: 80%;
  }
  .page h2 {
    font-size: 1.4em;
  }
  .footer {
    bottom: 10px;
  }
  .footer p {
    font-size: 0.9em;
  }
}
</style>